<template>
	<view class="">
		<view class="u-padding-20">
			<u-form :model="form" ref="uForm" label-width="160">
				<u-form-item label="姓名" prop="name">
					<u-input v-model="form.name" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item label="年龄" prop="age">
					<u-input v-model="form.age" type="Number" placeholder="请输入年龄" />
				</u-form-item>
				<u-form-item label="手机号" prop="phone">
					<u-input v-model="form.phone" type="Number" placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item label="性别">
					<u-radio-group v-model="form.gender">
						<u-radio v-for="(item, index) in sexList" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="工种" prop="work" @click='selectWork=true'>
					<u-input  @click='selectWork=true' v-model="form.work" disabled type="select" placeholder="请选择工种" />
				</u-form-item>

				<u-form-item label="工作经历" label-position="top">
					<u-input :customStyle="{background:'#f7f7f7',padding:'20rpx'}" v-model="form.work_experience"
						type="textarea" placeholder="请输入工作经历" />
				</u-form-item>


				<view class="u-margin-top-20">身份证</view>
				<view class="u-flex">
					<u-form-item :border-bottom="false"  prop='idcard_front'  label-position="top" >
						<w-upload :Number='1' v-model="form.idcard_front" text="身份证正面" width="300"></w-upload>
					</u-form-item>

					<u-form-item :border-bottom="false" label-position="top" prop='idcard_back'>
						<w-upload :Number='1' v-model="form.idcard_back" text="身份证反面" width="300"></w-upload>
					</u-form-item>
				</view>


			</u-form>
		</view>
		
		
		<view class="" style="width: 600rpx;margin:40rpx auto;font-size: 20rpx;">
			<u-checkbox-group>
				<u-checkbox v-model="isread" :label-disabled="true">
					请认真阅读<text @click="read(17)">《用户服务协议及隐私政策》</text>
					</u-checkbox>
			</u-checkbox-group>
		</view>
	

		
		<view style="width: 90%;margin: 40rpx auto;">
			<u-button @click="submit" type="primary" shape="circle">提交</u-button>
		</view>
		
		
		<u-toast ref="uToast" />
<u-select child-name="child" v-model="selectWork" label-name="workName" mode="mutil-column-auto" :list="workList" @confirm="confirm"></u-select>
		
	</view>
</template>

<script>
	export default {
		data() {
				
			return {
					isread:false,
				selectWork:false,
				sexList: [{
					name: '男',
					disabled: false
				}, {
					name: '女',
					disabled: false
				}],
				workList:[],
				form: {
					name: '',
					age: '',
					work:'',
					phone:'',
					gender: "",
					work_experience:'',
					idcard_front: [],
					idcard_back:[],
					type:1
				},
				rules: {
					name: [{
						
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					
					idcard_front:[{
						validator: (rule, value, callback) => {
							if(value.length){
								return true;
							}else{
								return false;
							}
						},
						message: '请上传身份证正面',
						trigger: ['change', 'blur'],
					}],
					
					idcard_back:[{
						validator: (rule, value, callback) => {
							if(value.length){
								return true;
							}else{
								return false;
							}
						},
						message: '请上传身份证反面',
						trigger: ['change', 'blur'],
					}],
					
					
					work: [{
						required: true,
						message: '请输入工种',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],

					age: [{
						required: true,
						message: '请输入年龄',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			};
		},
		methods: {
			
			read(e){
				uni.navigateTo({
					url:'../about/index?id='+e
				})
			},
			confirm(e){
				this.form.work=e[1].label
			},
			work(){
				this.$u.post('/index/work', {}).then(res => {
					this.workList = res;
				}).catch(err => {
				})
			},
			submit() {
				if(!this.isread){
								   this.$u.toast("请认真阅读协议")
								   return
				}
				
				this.$refs.uForm.validate(valid => {
					if (valid) {
					
						this.$u.post('/user/apply', this.form).then(res => {
							this.$refs.uToast.show({
								title: '提交成功',
								type: 'success',
								back :true
							})
							
						}).catch(err => {
						   
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.work()
		}
	};
</script>


<style scoped>
	
</style>
